<template lang="html">
  <div class="choice_box">
     <Headbar :title='title'></Headbar>
     <!-- 顶部图片 -->
     <div class="choice_top">
        <img src="http://appnh5.caissa.com.cn/images/destination_banner.png">
     </div>
     <!-- 中部导航list -->
     <div class="choice_list">
        <ul>
           <router-link to="/choice/hot" class="list_1"><li>亚洲</li></router-link>
           <router-link to="/choice/hot"><li>欧洲</li></router-link>
           <router-link to="/choice/hot"><li>美洲</li></router-link>
           <router-link to="/choice/hot"><li>澳洲</li></router-link>
           <router-link to="/choice/hot"><li>非洲</li></router-link>
           <router-link to="/choice/hot"><li>海岛</li></router-link>
        </ul>
        <router-view></router-view>
     </div>
     <!-- 中部插件 -->
     <!-- <Hot></Hot> -->
     <!-- 底部按钮 -->
     <div class="choice_bottom">
        <span @click="changeurl()" class="choick_bottom_text">没有明确目的地，跳过</span>
        <span @click="changeurl()" class="choick_bottom_text">下一步</span>
     </div>
     <!-- <div class="aa">

     </div> -->
  </div>

</template>

<script>
// import Hot from './hot'
import Headbar from './head'
export default {
   data(){
      return{
         title: '凯撒旅游--个性定制服务'
      }
   },
   components:{
      // Hot
      Headbar
   },
   methods:{
      changeurl(){
         this.$router.push({
            name: 'plan'
         })
      }
   }
}
</script>

<style lang="css">
.choice_box{
}
.choice_top{
   width: 100%;
   height:6rem;
   background-color: #f9f9f9;
}
.choice_top img{
   width: 80%;
   height:50%;
   margin-top: 1.3rem;
}
.choice_list{
   width: 100%;
   height: auto;
   margin-top: -1rem;
}
.choice_list router-link-active{
   background-color: pink;
}
.choice_list ul li{
   float: left;
   width: 16%;
   height:4rem;
   line-height: 4rem;
   margin-right: 0.2rem;
   font-size: 1.3rem;
   color: gray;
   margin-bottom: 1rem;
}

.choice_bottom{
   margin-bottom: 2rem;
}
.choick_bottom_text{
   width: 90%;
   height: 4rem;
   display: inline-block;
   margin-bottom: 0.5rem;
   font-size: 1.5rem;
   line-height: 4rem;
}
.choick_bottom_text:nth-of-type(1){
   border: 0.1rem solid #00b0ec;
   border-radius: 0.6rem;
   color: #00b0ec;
}
.choick_bottom_text:nth-of-type(2){
   color: #fff;
   background-color: #00b0ec;
   border-radius: 0.6rem;
}
</style>
